<script setup>
import { ref } from "vue"

const skill_list = ref([
	{
		label: "Html",
		progress: "60%",
		id: 1,
	},
	{
		label: "Javascript",
		progress: "60%",
		id: 2,
	},
	{
		label: "Css",
		progress: "50%",
		id: 3,
	},
	{
		label: "Vue",
		progress: "50%",
		id: 4,
	},
	{
		label: "NodeJs",
		progress: "40%",
		id: 5,
	},
	{
		label: "Python",
		progress: "40%",
		id: 6,
	},
	{
		label: "Mysql",
		progress: "30%",
		id: 7,
	},
	{
		label: "Java",
		progress: "20%",
		id: 8,
	},
])
</script>
<template>
	<div class="konw-how">
		<div class="school">
			<div class="title">教育</div>
			<div class="show-box">
				<div class="show-box-item">
					<div class="item-title">2018-2021</div>
					<div class="item-content">
						嵌入式技术与应用-专科&emsp;&emsp;重庆电子工程职业学院
					</div>
				</div>
				<div class="show-box-item">
					<div class="item-title">其他</div>
					<div class="item-content">网络自学，任意地点</div>
				</div>
			</div>
		</div>
		<div class="skill">
			<div class="title">技能</div>
			<div class="show-box">
				<div
					class="show-box-item"
					v-for="item in skill_list"
					:key="item.id">
					<div class="item-title">
						<span>{{ item.label }}</span>
						<span class="progress">{{ item.progress }}</span>
					</div>
					<div class="item-content">
						<div :class="`progress-bar-${item.id}`"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="introduce">
			在这半年的编程自学中，我收获了很多知识，逐步走向了正轨，这里是我掌握的知识，还在慢慢增长，希望能够获得一份正式的工作机会~~~
		</div>
	</div>
</template>
<style scoped lang="scss">
@mixin progress-bar($name, $percentage) {
	.progress-bar-#{$name} {
		width: 100%;
		height: 10px;
		background-color: $progress-bar-bg-color;
		border-radius: 2px;
		&::after {
			content: "";
			display: block;
			width: $percentage;
			height: inherit;
			border-radius: inherit;
			background-color: $progress-bar-color;
		}
	}
}
.konw-how {
	$padding: 20px;
	$height: 40px;
	flex: 1;
	height: inherit;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding-top: $padding;
	.title {
		font-size: 40px;
		color: $title-color;
		height: $height;
		padding: 0 20px;
		animation: bounceInDown $animation-duration-2;
	}
	.show-box {
		height: calc(100% - $height);
		width: 100%;
		padding: 20px 0;
		overflow: hidden;
		.show-box-item {
			height: calc(25% - 40px);
			padding: 10px;
			border-radius: 5px;
			box-shadow: 3px 3px 10px $box-shadow-color;
			animation: fadeInDown $animation-duration-5;
			transition: all $animation-duration-1;
			background-color: $show-box-bg-color;
			cursor: default;
			&:hover {
				transform: translate(-10px, -10px);
			}
			.item-title {
				letter-spacing: 4px;
				font-size: 30px;
				height: 30px;
				display: flex;
				justify-content: space-between;
				.progress {
					letter-spacing: 1px;
				}
			}
			.item-content {
				height: calc(100% - 30px);
				display: flex;
				align-items: center;
				@for $i from 1 through 10 {
					@if $i == 1 or $i == 2 {
						@include progress-bar($i, 60%);
					} @else if $i == 4 or $i == 3 {
						@include progress-bar($i, 50%);
					} @else if $i == 6 or $i == 5 {
						@include progress-bar($i, 40%);
					} @else if $i == 7 {
						@include progress-bar($i, 30%);
					} @else if $i == 8 {
						@include progress-bar($i, 20%);
					}
				}
			}
		}
	}
	.school {
		width: 25%;
		height: 100%;
		.title {
		}
		.show-box {
			.show-box-item {
				margin: 40px 20px 0 20px;
			}
			.show-box-item:nth-child(even) {
				animation: fadeInUp $animation-duration-5;
			}
		}
	}
	.skill {
		width: 55%;
		height: 100%;
		.title {
		}
		.show-box {
			display: flex;
			flex-wrap: wrap;
			.show-box-item {
				width: calc(50% - 30px);
				margin: 40px 10px 0 20px;
			}
			.show-box-item:nth-child(even) {
				margin: 40px 20px 0 10px;
				animation: fadeInUp $animation-duration-5;
			}
		}
	}
	.introduce {
		margin-left: 10px;
		width: 7%;
		height: 80%;
		font-size: 20px;
		line-height: 25px;
		letter-spacing: 1px;
		animation: zoomIn $animation-duration-2;
	}
}
</style>
